<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{
  (e: 'practiceReviewClick'): void
}>()
const todayNewWords = ref(14)
const totalWords = ref(14)
const todayReview = ref(2)
const waitingReview = ref(24)

function handlePracticeReview() {
  emit('practiceReviewClick')
}
</script>

<template>
  <view class="stats-grid">
    <view class="stats-item">
      <text class="stats-value">
        {{ todayNewWords }}
      </text>
      <text class="stats-label">
        今日新学
      </text>
    </view>
    <view class="stats-item">
      <text class="stats-value">
        {{ totalWords }}
      </text>
      <text class="stats-label">
        累计词汇
      </text>
    </view>
    <view class="stats-item">
      <text class="stats-value">
        {{ todayReview }}
      </text>
      <text class="stats-label">
        今日复习
      </text>
    </view>
    <view class="stats-item">
      <view class="review-tag">
        <text class="stats-value">
          {{ waitingReview }}
        </text>
        <uv-tags text="陪练复习" type="primary" plain class="review-tag-btn" @click="handlePracticeReview" />
      </view>
      <text class="stats-label">
        待复习
      </text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    margin-top: 30rpx;

    .stats-item {
        background-color: #ffffff;
        border-radius: 24rpx;
        padding: 30rpx;
        text-align: center;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
        transition: transform 0.2s;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:active {
            transform: scale(0.98);
        }

        .review-tag-btn {
            position: absolute;
            top: 10rpx;
            right: 4rpx;
            background-color: #fff;
        }

        .stats-value {
            font-size: 48rpx;
            font-weight: 600;
            background: linear-gradient(to right, #ff9500, #ffb44f);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .stats-label {
            font-size: 26rpx;
            color: #666;
            margin-top: 12rpx;
        }

        .review-tag {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12rpx;
        }
    }
}
</style>
